<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>问答</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<style>
* {
	box-sizing: border-box;
}

body {
	background-color: #f0f0f0;
	font-family: 'Muli', sans-serif;
}

h1 {
	margin: 50px 0 30px;
	text-align: center;
}
/* 第二步：开始写CSS */
.faqs-container {
	margin: 0 auto;
	max-width: 600px;
}
/* 每个问答的css */
.faq {
	background-color: transparent;
	border: 1px solid #9FA4A8;
	border-radius: 10px;
	padding: 30px;
	position: relative;
	overflow: hidden;
	margin: 20px 0;
}

/* 打开答案的背景色和阴影 */
.faq.active {
	background-color: #fff;
}

.faq-title {
	margin: 0 35px 0 0;
}

.faq-text {
	display: none;
	margin: 30px 0 0;
}

/* 点击展开的时候会给faq这个class加一个active
这个时候faq-text就会变成block就展示出来了 */
.faq.active .faq-text {
	display: block;
}

/* 展开和关闭按钮的Css样式 */
.faq-toggle {
	background-color: transparent;
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	padding: 0;
	position: absolute;
	top: 30px;
	right: 30px;
	height: 30px;
	width: 30px;
}

/* 关闭和打开的按钮样式 */
.faq.active .faq-toggle {
	background-color: #9FA4A8;
}

.faq-toggle .fa-times {
	display: none;
}

.faq.active .faq-toggle .fa-times {
	display: block;
}

.faq-toggle .fa-chevron-down {
	color: #83888E;
}

.faq.active .faq-toggle .fa-chevron-down {
	display: none;
}

</style>

</head>
<body>
<!-- 第一步：写好问题和答案的HTML布局 -->
<h1>帮助与常见问题</h1>
<div class="faqs-container">
	<div class="faq active">
		<h3 class="faq-title">
			Q：没有基础能报名吗?
		</h3>
		<p class="faq-text">
			你好！本期课程适合任何基础，若你对大前端开发感兴趣，
            或本身是程序员想转大前端开发都可以学习。
		</p>
		<button class="faq-toggle">
			<i class="fas fa-chevron-down"></i>
			<i class="fas fa-times"></i>
		</button>
	</div>
	
	<div class="faq">
		<h3 class="faq-title">
			Q：课程采用什么上课方式？
		</h3>
		<p class="faq-text">
			本期课程采用录播+答疑+督导式+闯关式学习，你可以
            自由选择时间来学习，但是总时间不变，采用倒计时方式，
            我们采用各种手段逼迫你在总时间内学完和做完所有项目课程！
		</p>
		<button class="faq-toggle">
			<i class="fas fa-chevron-down"></i>
			<i class="fas fa-times"></i>
		</button>
	</div>
	
	<div class="faq">
		<h3 class="faq-title">
			Q：学完以后能做什么？
		</h3>
		<p class="faq-text">
			PC端网页开发+移动端网页开发、管理平台功能界面开发、
            H5界面开发、公众平台二次开发、微信小程序开发、APP开发
		</p>
		<button class="faq-toggle">
			<i class="fas fa-chevron-down"></i>
			<i class="fas fa-times"></i>
		</button>
	</div>
	
	<div class="faq">
		<h3 class="faq-title">
			Q：到公司上班每月能拿多少钱？
		</h3>
		<p class="faq-text">
			通常一线城市能熟练使用vue起步薪资都在万元以上，
            二三线城市变化很大，大多在7K到15K之间，也有20K以上的，
            具体还是要看你技术水平与公司福利
		</p>
		<button class="faq-toggle">
			<i class="fas fa-chevron-down"></i>
			<i class="fas fa-times"></i>
		</button>
	</div>
	
	<div class="faq">
		<h3 class="faq-title">
			Q：学不会怎么办？
		</h3>
		<p class="faq-text">
			只要观看完所有视频，完成所有闯关题目，不存在学不会，
            另外我们会穷尽一切办法强迫你学习！
		</p>
		<button class="faq-toggle">
			<i class="fas fa-chevron-down"></i>
			<i class="fas fa-times"></i>
		</button>
	</div>
</div>
<script>
    // 加一个JS代码点击如果存在active就移除，不存在就加上
    // 用于展开和关闭的效果
    const toggles = document.querySelectorAll('.faq-toggle');
    toggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
            toggle.parentNode.classList.toggle('active');
        });
    });
</script>
</body>
</html>